<template>
  <div>
    <div class="name">{{ student.name }}</div>
    <div class="name">{{ student.a.b.c }}</div>
    <div class="name">{{ bb }}</div>
    <div>
      <button @click="click">click</button>
    </div>
    <div>
      <button @click="$store.commit('add')">add</button>
      <el-button @click="$store.commit('del')">delete</el-button>
    </div>
    <div>{{ $store.state.count }}</div>
    <box></box>
    <panel></panel>
  </div>
</template>

<script>
import { reactive, defineComponent, computed } from 'vue'
export default defineComponent({
  setup() {
    const a = {
      b: {
        c: 1
      }
    }
    const obj = {
      a: {
        b: 1
      }
    }
    const student = reactive({
      name: 'zzz',
      a
    })
    const click = () => {
      student.a.b.c = 5
      obj.a.b = 2
    }
    const bb = computed(() => obj.a.b)
    return {
      click,
      student,
      bb
    }
  }
})
</script>
<style scoped>
</style>